<template>
  <div class="exportDialog">
    <el-dialog
        :title="detailObj.title"
        :visible.sync="detailObj.state"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        center>
      <div class="block-container">
        <el-form  ref="form" :model="nodeFrom" :disabled="editType==='3'" label-width="80px">
          <el-row :getter="10">
            <el-col :span="8">
              <el-form-item label="名称">
                <el-input v-model="nodeFrom.name" :disabled="editType==='3'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户">
                <el-input v-model="nodeFrom.yh" :disabled="editType==='3'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="雨量">
                <el-input v-model="nodeFrom.yl" :disabled="editType==='3'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <!--查看节点详情时隐藏-->
        <span slot="footer" class="dialog-footer" >
            <el-button @click="cancelMethod">取 消</el-button>
            <el-button type="primary" v-if="editType!=='3'" @click="saveNodeData">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from "@/zstp/utils/eventBus";

export default {
  props: {
    detailObj: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      editor:null,
      command:null,
      undoList:[],
      nodeFrom:{},
      item: {},
      node: {},
      page: {},
      graph: {},
      newDetailObj:{},
      oldDetailObj:{},
      // 编辑类型新增为true，编辑为false
      editType:'1',
    }
  },
  watch:{
    detailObj(val){
      if(val.title==='新增节点'){
        this.editType='1'
        Object.assign(this.newDetailObj,val)
      }
      else if(val.title==='编辑节点'){
        this.editType='2'
        Object.assign(this.oldDetailObj,val)
      }
      else{
        this.editType='3'
        Object.assign(this.oldDetailObj,val)
      }
    },
    node(val){
      if(val && Object.keys(val).length>0){
        Object.assign(this.nodeFrom,this.node)
      }
    }
  },
  mounted() {
    this.init()
    this.bindEvent()
  },
  methods: {
    init(){
      const { editor, command } = this.$parent;
      this.editor = editor;
      this.command = command;
    },
    bindEvent(){
      let self = this;
      eventBus.$on("afterAddPage", page => {
        self.page = page;
        self.graph = self.page.graph;
        eventBus.$on("nodeselectchange", item => {
          if (item.select === true && item.target.getType() === "node") {
            self.status = "node-selected";
            self.item = item.target;
            // 可以根据node判断选中的是哪个节点
            self.node = item.target.getModel();
          } else {
            self.status = "canvas-selected";
            self.item = null;
            self.node = null;
          }
        });
      });
    },
    cancelMethod(){
      // if (this.undoList.length > 0) this.command.undo();
      this.detailObj.state=false
      this.initObjectData()

    },
    saveNodeData(){
      // 如果是新增节点
      if(this.editType==='1'){
        Object.assign(this.newDetailObj,this.nodeFrom)
        this.command.executeCommand("add", [this.newDetailObj]);
        this.nodeFrom={}
      }
      // 编辑节点
      else if(this.editType==='2'){
        Object.assign(this.oldDetailObj,this.nodeFrom)
        this.graph.update(this.item, this.oldDetailObj);
      }
      this.initObjectData()
      this.detailObj.state=false
    },
    // 初始化对象数据
    initObjectData(){
      this.newDetailObj={}
      this.oldDetailObj={}
    }
  }
}
</script>

<style>
.exportDialog {
  width: 600px;
  height: 400px;
  .block-container{
  }
}
</style>
